<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录LAU</title>
    <link rel="stylesheet" href="/Sys/css/layui.css">
    <link rel="stylesheet" href="/Sys/css/sign.css">

    <link rel="stylesheet"
          href="/Sys/js/css/modules/layui-icon-extend/iconfont.css">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/Sys/css/font.css">
    <link rel="stylesheet" href="/Sys/css/xadmin.css">
    <script type="text/javascript"
            src="/Sys/js/jquery-3.3.1.min.js"></script>
    <script src="/Sys/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>



    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body class="layui-unselect lau-sign-body"
      style="background-image: url('/Sys/images/mybg.jpg'); background-repeat: no-repeat; ">

<form action="www.baidu.com" class="layui-form" id="myForm">
    <div class="layui-form layui-form-pane lau-sign-form">
        <h1 class="lau-sign-title">注册账号</h1>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="iconfont layui-icon-extend-ziyuan"></i> 身份</label>
            <div class="layui-input-block">
                <input type="radio" name="role" value="TEACHER" title="教师" lay-filter="role">
                <input type="radio" name="role" value="STUDENT" title="学生" lay-filter="role" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="iconfont layui-icon-extend-bianhao"></i> <span id="usernameLabel">学号</span></label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="4-20位数字或字母" lay-verify="required|username" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i> 姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入姓名" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i> 密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="8-20位数字和字母组合" lay-verify="required|password" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i> 确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" placeholder="请再次输入密码" lay-verify="required|confirmPassword" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i> 手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入手机号" lay-verify="required|phone" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-email"></i> 邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" placeholder="请输入邮箱" lay-verify="required|email" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">注 册</button>
        </div>

    </div>
</form>

</body>


<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;

        // 监听身份选择
        form.on('radio(role)', function(data) {
            var label = data.value === 'TEACHER' ? '教师号' : '学号';
            $('#usernameLabel').text(label);
        });

        // 自定义验证规则
        form.verify({
            username: function(value) {
                if(value.length < 4 || value.length > 20) {
                    return '账号长度必须在4-20位之间';
                }
                if(!/^[A-Za-z0-9]+$/.test(value)) {
                    return '账号只能包含数字和字母';
                }
            },
            password: function(value) {
                if(value.length < 8 || value.length > 20) {
                    return '密码长度必须在8-20位之间';
                }
                if(!/^[A-Za-z0-9]+$/.test(value)) {
                    return '密码只能包含数字和字母';
                }
                if(!/^(?=.*[A-Za-z])(?=.*\d)/.test(value)) {
                    return '密码必须同时包含数字和字母';
                }
            },
            confirmPassword: function(value) {
                var password = $('input[name=password]').val();
                if(!password) {
                    return '请先输入密码';
                }
                if(value !== password) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 监听提交
        form.on('submit(register)', function(data) {
            var field = data.field;
            delete field.confirmPassword;

            // 发送注册请求
            $.ajax({
                url: '/Sys/addUser',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(field),
                success: function(res) {
                    if(res === 'success') {
                        layer.msg('注册成功', {
                            icon: 1,
                            time: 2000
                        }, function() {
                            window.location.href = '/Sys/login';
                        });
                    } else {
                        layer.msg('注册失败，该账号可能已被注册', {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('服务器错误，请联系管理员', {icon: 2});
                }
            });

            return false;
        });
    });
</script>
</html>